<template>
  <div p-5>
    <div class="title">基本信息</div>
    <a-descriptions
      :labelStyle="{ width: '160px' }"
      :content-style="{ color: '#444444', width: 'calc(100% / (24 / 6))' }"
      bordered
    >
      <a-descriptions-item label="公司名称">浙江实验室检测有限公司</a-descriptions-item>
      <a-descriptions-item label="简称">浙江实验室</a-descriptions-item>
      <a-descriptions-item label="法定代表人">张三</a-descriptions-item>
      <a-descriptions-item label="咨询电话">123456-11000</a-descriptions-item>
      <a-descriptions-item label="logo" :span="2">
        <div class="imgBox">
          <img class="myImg" src="~@/assets/image/logo.png" alt="" />
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="公司简介" :span="3"> 浙江实验室检测有限公司 </a-descriptions-item>
    </a-descriptions>
    <div class="footer">
      <a-button type="primary">编辑</a-button>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ArrowRightOutlined } from '@ant-design/icons-vue';
</script>
<style lang="less" scoped>
  .title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
  }
  .footer {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .imgBox {
    background-color: #186df5;
    width: 80px;
    padding: 4px;
  }
  .myImg {
    height: 30px;
  }
</style>
